

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'atest-demo'
})
</script>

<script lang="ts" setup>
import { ref } from "vue";
import Com from "@/components/test1";

let vHas = {
  mounted(el: HTMLElement, binding: { value: boolean }, e: Object) {
    if (!binding.value) el.parentElement?.removeChild(el);
  },
};

let bool = ref(true);

</script>

<template>
  <el-card style="overflow-y: auto;">
    <button @click="bool = !bool">toggle</button>
    <component :is="bool ? Com.ComponentA : Com.ComponentB">
      <template v-if="bool" v-slot:test>A</template>
    </component>
    <div v-has="true">v-has-test</div>
  </el-card>
</template>


<style scoped lang="scss">
.el-card {
  height: 100%;
  .el-card__body {
    height: 100%;
  }
}
</style>
